/* 
    封装Ajax的调用过程：
        1.在调用的时候需要传递的参数：
            1.请求方式 2. 请求地址 3. 请求头信息.... 4.传递的数据（k=v,k=v）
        2. 通过一个对象来接受请求参数
            options {
                type: "POST",
                url: "http://120.78.190.136:8080/spboot/hello",
                data: {
                    username: "zs",
                    password: "123"
                },
                header: {
                    'Content-Type' : 'application/x-www-form-urlencoded'
                },
                success: function(){},
                error: function(){},
                
            }

            success：ajax调用成功后会执行的方法
            error：ajax调用失败后会执行的方法
*/
function ajax(options) {
    const request = new XMLHttpRequest();
    // 1. 定义默认值
    const defaults = {
        type: 'GET',
        url: '',
        async: true,
        data: {},
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function () { },
        error: function () { }
    }
    // 2. 通过用户传递的参数替换默认值
    Object.assign(defaults, options);

    // 3. 如果是GET请求，需要将参数进行拼接
    let params = '';
    for (const key in defaults.data) {
        params += key + '=' + defaults.data[key] + '&';
    }
    // 去掉最后一个连接符 &
    params = params.substring(0, params.length - 1);

    // 4. 判断是否为GET请求，GET请求需要拼接参数
    if (defaults.type == "GET") {
        defaults.url += '?' + params;
    }

    // 5. 创建请求链接
    request.open(defaults.type, defaults.url, defaults.async);

    // 6. 判断是否为POST请求
    if (defaults.type == "POST") {
        // 设置头信息
        request.setRequestHeader("Content-Type", defaults.header['Content-Type']);
        // 判断发送到服务端的数据格式是否为JSON
        if (defaults.header['Content-Type'] == "application/json") {
            request.send(JSON.stringify(defaults.data));
        } else {
            request.send(params);
        }
    } else {
        request.send();
    }

    // 7. 请求完成后的处理
    // 当一个XMLHttpRequest请求完成的时候会触发load 事件。
    request.onload = function () {
        // 获取服务端响应的头信息
        const responseContentType = request.getResponseHeader("Content-Type");
        let responseValue = request.responseText;
        //判断服务端响应回来的数据格式是否为JSON格式
        if (responseContentType.includes("application/json")) {
            responseValue = JSON.parse(responseValue);
        }

        //响应成功，调用回调函数，将服务端响应结果和xmlHTTPRequest对象返回.
        if (request.status == 200) {
            defaults.success(responseValue, request);
        } else {
            defaults.error(responseValue, request);
        }
    }

    // 8. 请求发送的时候出现错误
    request.onerror = function () {
        console.log("请求出错了");
        defaults.error(request);
    }
};

function jsonp(options) {
    // 创建script元素
    const scriptObj = document.createElement("script");
    let params = '';

    for (const key in options.data) {
        params += '&' + key + '=' + options.data[key];
    }
    // 生成函数的名称
    // 调用服务端url
    //callback=func10&name=lisi
    scriptObj.src = options.url + '?callback=' + options.funcname + params;

    // 将options.funcname变成全局的
    window[options.funcname] = options.success;
    // console.dir(window);

    // 执行+删除
    document.body.appendChild(scriptObj);
    scriptObj.parentNode.removeChild(scriptObj);

    /* 
        返回：func10({name: "比屋教育05"}) Uncaught ReferenceError: func10 is not defined
        解决思路：func10 一定要在全局存在，可以执行的。
    */
}        /* 
            封装Ajax的调用过程：
                1.在调用的时候需要传递的参数：
                    1.请求方式 2. 请求地址 3. 请求头信息.... 4.传递的数据（k=v,k=v）
                2. 通过一个对象来接受请求参数
                    options {
                        type: "POST",
                        url: "http://120.78.190.136:8080/spboot/hello",
                        data: {
                            username: "zs",
                            password: "123"
                        },
                        header: {
                            'Content-Type' : 'application/x-www-form-urlencoded'
                        },
                        success: function(){},
                        error: function(){},
                        
                    }

                    success：ajax调用成功后会执行的方法
                    error：ajax调用失败后会执行的方法
        */
function ajax(options) {
    const request = new XMLHttpRequest();
    // 1. 定义默认值
    const defaults = {
        type: 'GET',
        url: '',
        async: true,
        data: {},
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function () { },
        error: function () { }
    }
    // 2. 通过用户传递的参数替换默认值
    Object.assign(defaults, options);

    // 3. 如果是GET请求，需要将参数进行拼接
    let params = '';
    for (const key in defaults.data) {
        params += key + '=' + defaults.data[key] + '&';
    }
    // 去掉最后一个连接符 &
    params = params.substring(0, params.length - 1);

    // 4. 判断是否为GET请求，GET请求需要拼接参数
    if (defaults.type == "GET") {
        defaults.url += '?' + params;
    }

    // 5. 创建请求链接
    request.open(defaults.type, defaults.url, defaults.async);

    // 6. 判断是否为POST请求
    if (defaults.type == "POST") {
        // 设置头信息
        request.setRequestHeader("Content-Type", defaults.header['Content-Type']);
        // 判断发送到服务端的数据格式是否为JSON
        if (defaults.header['Content-Type'] == "application/json") {
            request.send(JSON.stringify(defaults.data));
        } else {
            request.send(params);
        }
    } else {
        request.send();
    }

    // 7. 请求完成后的处理
    // 当一个XMLHttpRequest请求完成的时候会触发load 事件。
    request.onload = function () {
        // 获取服务端响应的头信息
        const responseContentType = request.getResponseHeader("Content-Type");
        let responseValue = request.responseText;
        //判断服务端响应回来的数据格式是否为JSON格式
        if (responseContentType.includes("application/json")) {
            responseValue = JSON.parse(responseValue);
        }

        //响应成功，调用回调函数，将服务端响应结果和xmlHTTPRequest对象返回.
        if (request.status == 200) {
            defaults.success(responseValue, request);
        } else {
            defaults.error(responseValue, request);
        }
    }

    // 8. 请求发送的时候出现错误
    request.onerror = function () {
        console.log("请求出错了");
        defaults.error(request);
    }
};

function jsonp(options) {
    // 创建script元素
    const scriptObj = document.createElement("script");
    let params = '';

    for (const key in options.data) {
        params += '&' + key + '=' + options.data[key];
    }
    // 生成函数的名称
    // 调用服务端url
    //callback=func10&name=lisi
    scriptObj.src = options.url + '?callback=' + options.funcname + params;

    // 将options.funcname变成全局的
    window[options.funcname] = options.success;
    // console.dir(window);

    // 执行+删除
    document.body.appendChild(scriptObj);
    scriptObj.parentNode.removeChild(scriptObj);

    /* 
        返回：func10({name: "比屋教育05"}) Uncaught ReferenceError: func10 is not defined
        解决思路：func10 一定要在全局存在，可以执行的。
    */
}